<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script>
        function htmlFontSize() {
            var clientWidth = document.documentElement ? document.documentElement.clientWidth : document.body.clientWidth;
            if (clientWidth >= 768 && clientWidth < 960) {
                clientWidth = 812;
            } else if (clientWidth >= 1280) {
                clientWidth = 960;
            }

            document.documentElement.style.fontSize = clientWidth * 1 / 10 + "px";
            return clientWidth * 1 / 10;
        }
        htmlFontSize()

        window.onresize = function () {
            htmlFontSize()
        }
    </script>
    <title>年货节分会场</title>
    <link rel="stylesheet" href="./css/index.min.css">
</head>

<body>
    <header>
            <img src="./img/gd-banner.jpg" alt="">
            
    </header>
    <nav>
        <ul>
            <li slc='0' class="slect-0 cur">加多宝</li>
            <li slc='1' class="slect-1">首彩</li>
            <li slc='2' class="slect-2 slect-3 discard">穆斯利安</li>
            <li slc='2' class="slect-2 slect-3 discard">小样</li>
            <li slc='3' class="slect-4 slect-5 slect-6 slect-7">米老头</li>
            <li slc='3' class="slect-4 slect-5 slect-6 slect-7">优乐美</li>
            <li slc='3' class="slect-4 slect-5 slect-6 slect-7">喜之郎</li>
            <li slc='3' class="slect-4 slect-5 slect-6 slect-7">喜之郎</li>
            <li slc='4' class="slect-8">盈享</li>
            <li slc='5' class="slect-9">嘉宝</li>
            <li slc='6' class="slect-10 slect-11 slect-12">百年树</li>
            <li slc='6' class="slect-10 slect-11 slect-12">中国仁</li>
            <li slc='6' class="slect-10 slect-11 slect-12">乐方</li>
            <li slc='7' class="slect-13">旺旺</li>
            <li slc='8' class="slect-14">雅集</li>
        </ul>
        <span class="nav-more">更多</span>
        
    </nav>
    <div class="wrap">
        <!-- one -->
        <ul class="wrap-title">
            <li>加多宝</li>
        </ul>
        <p class="wrap-info"></p>
        
        <div class="container clearfix"></div>
        <!-- tow -->
        <ul class="wrap-title">
            <li>首彩</li>
        </ul>
        <p class="wrap-info"></p>
        
        <div class="container clearfix"></div>
        <!-- three -->
        <ul class="wrap-title discard">
            <li>穆斯利安</li>
            <li>小样</li>
        </ul>
        <p class="wrap-info discard"></p>
        
        <div class="container clearfix discard"></div>
        <!-- four -->
        <ul class="wrap-title">
            <li>米老头</li>
            <li>优乐美</li>
            <li>喜之郎</li>
        </ul>
        <p class="wrap-info"></p>
        
        <div class="container clearfix"></div>
        <!-- five -->
        <ul class="wrap-title">
            <li>盈享</li>
        </ul>
        <p class="wrap-info"></p>
        
        <div class="container clearfix"></div>
        <!-- siex -->
        <ul class="wrap-title">
            <li>嘉宝</li>
        </ul>
        <p class="wrap-info"></p>
        
        <div class="container clearfix"></div>
        <!-- siex -->
        <ul class="wrap-title">
                <li>百年树</li>
                <li>中国仁</li>
                <li>乐方</li>
        </ul>
        <p class="wrap-info"></p>
        
        <div class="container clearfix"></div>
        <!-- siex -->
        <ul class="wrap-title">
            <li>旺旺</li>
        </ul>
        <p class="wrap-info"></p>
        
        <div class="container clearfix"></div>
        <!-- siex -->
        <ul class="wrap-title">
                <li>雅集</li>
            </ul>
            <p class="wrap-info"></p>
            
            <div class="container clearfix"></div>
        <!-- back-top -->
        <div class="wrap-backtop"></div>
    </div>
    <footer>
        <div class="kefu"></div>
    </footer>
    <!-- template -->
    <script type="text/html" id="card-tpl">
        {{each $data}}
        <a class="card C_J_good fl" data-id="{{$value.id}}">
            <img src="{{$value.pic}}" alt="">
            <div class="card-foot">
                <p class="card-foot-title">{{$value.name}}</p>
                <p class="card-foot-old">原价:
                    <del>￥{{$value.price_on_tag}}</del>
                </p>
                <p class="card-foot-new">年货价：￥
                    <i>{{$value.discountPrice}}</i>
                </p>
            </div>
        </a>
        {{/each}}
    </script>
</body>
<script src="../../../js/jquery-1.8.3.min.js"></script>
<script src="../../../js/art-template.js"></script>
<script src="../../../js/login.js"></script>
<script src="../../../js/model.js"></script>
<script src="../../../js/model-citizen.js"></script>
<script class="app-min"></script>


<script>
    (function (window, $, template) {
        var SW = window.screen.width;
        // var HASH = window.location.hash.substring(1);
        var HASH = 'sc';
        console.log(window.location.href);
        var info = {
            gd: [
                [108404, 119488, 136921, 113954],
                [112443, 112443, 113489, 113488, 113488, 113488, 112318, 112303, 112413, 113766, 112303,
                    113493,
                    113493
                ],
                [148723, 148724, 148725, 148729, 148729, 148728, 148727, 149045, 149045, 149045, 149045,
                    149045,
                    149045, 149045
                ],
                [142844, 142852],
                [149231, 149230, 149096],
                [149463, 149469, 149505, 149506, 149514, 149514, 149485, 149459, 149459, 149459, 149459,
                    149459, 149459, 149306
                ]
            ],
            gx: [
                [119488, 108404, 136921, 113954],
                [112443, 112443, 113489, 113488, 113488, 113488, 112318, 112303, 112413, 113766, 112303,
                    113493, 113493
                ],
                [],
                [142844, 142852],
                [149231, 149230, 149096],
                [149463, 149469, 149505, 149506, 149514, 149514, 149485, 149459, 149459, 149459, 149459,
                    149459, 149459, 149306
                ]
            ],
            hb: [
                [108404, 119488, 136921, 113954],
                [112443, 112443, 113489, 113488, 113488, 113488, 112318, 112303, 112413, 113766, 112303,
                    113493, 113493
                ],
                [],
                [142844, 142852],
                [149231, 149230, 149096],
                [149463, 149469, 149505, 149506, 149514, 149514, 149485, 149459, 149459, 149459, 149459,
                    149459, 149459, 149306
                ]
            ],
            sc: [
                [149078, 149077, 149726],
                [108404, 119488, 136921, 113954],
                [142844, 142852],
                [113766, 113493, 113489, 113488, 113409, 112443, 112413, 112411, 112318, 112317, 112305,
                    112304, 112303
                ],
                [149231, 149230, 149096],
                [149514, 149506, 149505, 149485, 149478, 149469, 149463, 149459, 149306],
                [149869, 149879, 149880, 149877, 149878, 149868, 149876, 149875, 149881],
                [149368, 149365, 149363, 149362, 149361, 149358, 149357, 149353, 149352, 149350, 149349,
                    149348, 149346
                ],
                [148036, 148035, 148034, 148033, 148032, 147597],
            ]
        }

        init()

        var infoStr = '该品牌年货集单暂未开始 敬请期待。,该品牌年货集单暂未开始 敬请期待。,该品牌年货集单暂未开始 敬请期待。,该品牌年货集单暂未开始 敬请期待。,该品牌年货集单暂未开始，敬请期待。,该品牌年货集单暂未开始，敬请期待。,该品牌年货集单暂未开始，敬请期待。,该品牌年货集单暂未开始，敬请期待。,该品牌年货集单暂未开始，敬请期待。,该品牌年货集单暂未开始，敬请期待。,该品牌年货集单暂未开始，敬请期待。'
        infoStr.split(',').forEach(function (v, i) {
            $('.wrap-info').eq(i).text(v)
        })

        function init() {
            if (SW < 810) {
                $('.app-min').attr('src', "../../../js/app.min.js")
            }
            // if (HASH != 'gd') {
            //     $('.three').css({
            //         'position': 'absolute',
            //         'left': '-9000px'
            //     });
            // }
            if (SW > 960) {
                changeBg(HASH, '-pc')
            } else {
                changeBg(HASH, '')
            }
            setData(info[HASH])

        }

        function changeBg(hash, fix) {
            $('body').css({
                'background-image': "url('./img/" + hash + "-bg.jpg')"
            })
            $('header').html('<img src="./img/'+hash+'-banner'+fix+'.jpg" alt="">')
            
        }

        function sorter(oldArr, newArr) {
            var resArr = [];
            oldArr.forEach(function (oldVal) {
                newArr.forEach(function (newVal) {
                    if (oldVal == newVal.id) {
                        addAttr(newVal, oldVal)
                        resArr.push(newVal);
                    }
                })
            });
            return resArr;
        }

        function addAttr(obj, id) {
            obj.pic = obj.pic.replace('240_240', '800_800');
            obj.screen = window.screen.width;
        }

        function getData(id, index) {
            $.ajax({
                url: 'http://www.cjwsc.com/qcwdProduct/getProductByIds',
                data: {
                    ids: id.join(','),
                    business_type: SW < 960 ? (SW < 810 ? 20 : 50) : 10,
                    client_type: SW < 960 ? (SW < 810 ? 2 : 5) : 1
                },
                dataType: "jsonp",
                jsonp: 'jsonpcallback',
                success: function (res) {
                    res = sorter(id, res.msg)
                    $('.container').eq(index).html(template('card-tpl', res))
                }
            })
        }

        function setData(info) {
            info.forEach(function (v, i) {
                getData(v, i)
            })
        }



        // 设置nav栏选中状态和滚动
        function setNavCur(index) {
            var slect = $('.slect-' + index)
            slect.addClass('cur')
            pageScrollTo(getTitleTop(slect.attr('slc')))
        }


        // 获取title的高度
        function getTitleTop(index) {
            return $('.wrap-title').eq(index).offset().top - $('nav').height()
        }

        // 页面滚动
        function pageScrollTo(size) {
            $('html,body').animate({
                scrollTop: size
            }, 500)
        };

        // 功能
        (function (window, $) {
            var nav = $('nav'),
                navTop = nav.offset().top,
                wrap = $('.wrap');
            // 头顶固定
            $(window).on('scroll', function () {
                if ($(this).scrollTop() > navTop) {
                    nav.css({
                        'position': 'fixed'
                    })
                    wrap.css({
                        'margin-top': nav.height()
                    })
                } else {
                    nav.css({
                        'position': 'static'
                    })
                    wrap.css({
                        'margin-top': 0
                    })
                }
            })

            $('.nav-more').on('click',function(){
                var $this = $(this),navUl = $('nav ul');
                if($this.text()!='收起'){
                    $this.text('收起')
                    navUl.css({
                    height:'auto'
                    })
                    return
                }
                $this.text('更多')
                navUl.css({
                height:$('nav li').height()*4
                })

            })

            // 顶部nav功能区
            $('nav').on('click', 'li', function () {
                var $this = $(this);
                $this.addClass('cur').siblings().removeClass('cur');
                setNavCur($this.index())
            })
            // 返回顶部
            $('.wrap-backtop,.kefu').on('click', function () {
                pageScrollTo(0)
            });
        }(window, $))

    })(window, $, template)
</script>

</html>